<template>
  <div>
   <tables  :delDataApi="delTemlate"  :loadDataApi="getTemplates" v-on:onAdd="onAdd" v-on:onEdit="onEdit"  :tableCofig="tableConfig" ref="tables"  :value="tableData" :columns="columns" @on-delete="handleDelete"/>
   <Drawer title="运费模板" v-model="isShopPanel" width="450" :style="formPanelStyles" :mask-closable="false">
       <Input v-model="templateFromData.tempName" placeholder="请输入模板名称" class="mt10"/>
       <Input type="textarea" :rows="4" v-model="templateFromData.remark" placeholder="请输入备注" class="mt10"/>
        <RadioGroup v-model="templateFromData.enabled" class="mt10">
              <Radio label="0">禁用</Radio>
              <Radio label="1">启用</Radio>
        </RadioGroup>
        <div class="drawer-footer">
            <Button style="margin-right: 8px" @click="isShopPanel = false">取消</Button>
            <Button type="primary" :loading="saveStatus" @click="addTemplate">
                <span v-if="!saveStatus">保存</span>
                <span v-else>正在保存中...</span>
            </Button>
        </div>
    </Drawer>  
    <formula  ref="formula" />
  </div>

</template>

<script>
import Tables from "_c/tables";
import formula from "_c/formula.vue";
import formulaUtils from "@/libs/formulaUtils";
import {
  getTemplates,
  delTemlate,
  updateTemplate,
  getTemplateConfig,
  saveTemplateConfig
} from "@/api/system/templateApi";
export default {
  components: {
    Tables,
    formula
  },
  data() {
    return {
      formula: "",
      saveStatus: false, //保存状态
      getTemplates: getTemplates,
      delTemlate: delTemlate,
      updateTemplate: updateTemplate,
      templateFromData: {
        tempName: "",
        remark: "",
        enabled: 0
      },
      isShopPanel: false,
      formPanelStyles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "53px",
        position: "static"
      },
      ruleValidate: {},
      tableConfig: {
        border: true,
        stripe: true,
        noDataText: "暂无模板数据",
        action: {
          title: "操作",
          showDel: true,
          showEdit: true,
          width: 200,
          buttons: [
            // {title:'设置',action:function(row){
            // }}
          ]
        }
      },
      columns: [
        { title: "模板编号", key: "tempId", tooltip: true, id: true },
        { title: "模板名称", key: "tempName" },
        {
          title: "城际计费公式",
          key: "interCity",
          tooltip: true,
          ellipsis: true,
          render: (h, params) => {
            return h(
              "span",
              {
                class: { "ivu-table-cell-tooltip-content": true },
                on: {
                  click: () => {
                    this.$refs.formula.show(params.row.interCity, formula => {
                      params.row.interCity = formula;
                      this.onEdit(params.row);
                    });
                  }
                }
              },
              params.row.interCity
                ? formulaUtils(params.row.interCity)
                : "设置公式"
            );
          }
        },
        {
          title: "同城计费公式",
          key: "wideCity",
          tooltip: true,
          ellipsis: true,
          render: (h, params) => {
            return h(
              "span",
              {
                class: { "ivu-table-cell-tooltip-content": true },
                on: {
                  click: () => {
                    this.$refs.formula.show(params.row.wideCity, formula => {
                      params.row.wideCity = formula;
                      this.onEdit(params.row);
                    });
                  }
                }
              },
              params.row.wideCity
                ? formulaUtils(params.row.wideCity)
                : "设置公式"
            );
          }
        },
        { title: "备注", key: "remark", tooltip: true, ellipsis: true },
        {
          title: "是否启用",
          width: 150,
          key: "enabled",
          align: "center",
          render: (h, params) => {
            return h(
              "Tag",
              {
                props: {
                  color: params.row.enabled ? "success" : "warning"
                },
                style: {
                  width: "60px"
                }
              },
              params.row.enabled ? "开启" : "关闭"
            );
          }
        },
        {
          title: "创建时间",
          key: "createTime",
          format: "date",
          align: "center"
        },

        { title: "创建人", key: "createBy", width: 80 }
      ],
      tableData: []
    };
  },
  methods: {
    onSetTemplate(tempId) {},
    addTemplate() {
      this.saveStatus = true;
      updateTemplate(this.templateFromData)
        .then(res => {
          this.saveStatus = false;
          this.isShopPanel = false;
          this.$refs.tables.loadData();
        })
        .catch(err => {
          this.saveStatus = false;
          this.$Message.error(err);
        });
    },
    onEdit(row) {
      this.updateTemplate(row)
        .then(res => {
          this.$Message.success("修改成功");
        })
        .catch(err => {
          this.$Message.error("修改失败");
        });
    },
    onAdd() {
      this.isShopPanel = true;
    },
    handleDelete(params) {
      console.log(params);
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      });
    }
  },
  mounted() {}
};
</script>
    
<style>
.formula_content {
  background: black;
  color: white;
  font-size: 10px;
  padding: 10px;
}
</style>
